<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--首页css-->

    <link rel="stylesheet" href="../../static/css/login.css" />
    <title>欢迎登录</title>
</head>
<body>

<div id="btndiv" style="position: absolute;z-index: 103;right:15px;top:30px;width:150px;height:45px;line-height: 45px;text-align: center;cursor: pointer">
    <a href="reg.html"><div class="btn" id="btn" style="width: 150px;background: rgba(72, 180, 209,0.4);">注册试用</div></a>
</div>

<div class="logo" onclick="toHome()"></div>
<span class="text" onclick="toHome()">慧上云</span>

<div style="position: absolute;z-index: 100;width:100%;height:100%;background: url(../../static/images/loginbg.jpg) no-repeat;"></div>
<div style="position: absolute;z-index: 101;width:100%;height:100%;background: #007ACA;filter:alpha(Opacity=40);-moz-opacity:0.4;opacity: 0.4;"></div>
<div style="position: absolute;z-index: 102;width:100%;height:100%;background: none;margin:0 auto;">
    <form action="/crm/login" method="post" id="loginForm" name="loginForm" target="loginFrame">
    <div class="login" id="login">
        <div class="line" style="font-size: 26px;color:#fff;font-weight: 700;">
            登录慧上云
        </div>
        <div class="line" style="">
            <input class="input" onkeypress="textAction(this)" onblur="textAction(this)" name="username" id="username" value="" type="text" placeholder="慧上云帐号" autocomplete="off"/>
        </div>
        <div class="line" style="position: relative;">
            <input class="input" onkeypress="textAction(this)" onblur="textAction(this)" name="password" id="password" value="" type="password" placeholder="请输入密码"  autocomplete="off"/>

            <a href="./forget.html" send="0" id="sendCode" style="position: absolute;    right: 80px;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;    top: 27px;">忘记密码</a>

        </div>
        <div class="line" style="display: none;color: #EE7942;
    font-size: 16px;
    font-weight: 700;" id="errmsg">
        </div>
        <div class="line" style="">
            <div class="btn" id="loginBtn" onclick="login()">登录</div>
        </div>
    </div>
    </form>
</div>
<iframe width="0" height="0" name="loginFrame" id="loginFrame"></iframe>


<script type="text/javascript">

window.onload = function(){
	var windowHeight = document.documentElement.clientHeight;//可视区域高
	var scale = window.screen.width/1280;
	
	var inputWidth = scale*470;
	setStyles(['username','password'],'height',scale*45+'px');
	setStyles(['username','password'],'width',inputWidth+'px');
	setStyles('login','height',scale*390+'px');
	setStyles('login','width',scale*550+'px');
	setStyles('loginBtn','width',scale*470+'px');
	setStyles('loginBtn','height',scale*45+'px');
	setStyles('loginBtn','line-height',scale*45+'px');
	setStyles('loginBtn','font-size',scale*18+'px');
	setStyles(['btndiv','btn'],'height',scale*45+'px');
	setStyles('btn','line-height',scale*45+'px');
	setStyles(['btndiv','btn'],'width',scale*150+'px');
	//setStyles('btn','font-size',scale*18+'px');
	setStyles('errmsg','font-size',scale*16+'px');
	setStylesByClass('line','width',scale*548+'px');
	setStylesByClass('line','padding',scale*15+'px');
	
	if(scale*1>1){
		setStylesByClass('input','border-bottom-width',2+'px');	
	}
	
	var formHeight = document.getElementById('loginForm').offsetHeight;
	setStyles('loginForm',"margin-top",(windowHeight-formHeight)/2+"px");


    document.onkeydown = function (e) { // 回车提交表单
// 兼容FF和IE和Opera
        var theEvent = window.event || e;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code == 13) {
            login();
        }
    }
}

function setStyles(id,property,value){
	if( typeof(id) == 'object' ){
		for(var i=0 ; i<id.length ; i++){
			setStyleById(id[i],property,value);
		}
	}else{
		setStyleById(id,property,value);
	}
}

function setStyleById(id,property,value){
	document.getElementById(id).style[property] = value;
}

function setStylesByClass(id,property,value){
	var eles = document.getElementsByClassName(id);
	for(var i=0 ; i<eles.length ; i++){
		eles[i].style[property] = value;	
	}
}
    function toHome() {
        top.location.href = "../../portal/portal.html";
    }

    function textAction(that) {
        if(that.value.length==0){
            that.style['border-bottom'] = "1px solid red";
        }else{
            that.style['border-bottom'] = "1px solid #48B4D1";
        }
        document.getElementById('errmsg').innerHTML = '';
    }

    document.getElementById('username').onkeyup = keyUp;
    document.getElementById('password').onkeyup = keyUp;

    function keyUp(event) {
        if(event.keyCode ==13){
            login();
        }
    }
    
    function login() {

        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;

        if( username.length == 0){
            document.getElementById('username').focus();
            document.getElementById('username').style['border-bottom'] = "1px solid red";
            return;
        }

        if( password.length ==0 ){
            document.getElementById('password').style['border-bottom'] = "1px solid red";
            document.getElementById('password').focus();
            return;
        }

        document.loginForm.submit();
    }

    function loged(result) {
        if( result==0){
            location.href = "/html/index/index.html";
        }else if(result == 100018){
            document.getElementById('errmsg').style.display = "block";
            document.getElementById('errmsg').innerHTML = '<span style="color: red;font-weight: 700;">用户名或密码错误</span>';
        }
    }

</script>
</body>
</html>

